<template>
	<view class="home">
		<view class="u-flex u-flex-xy-center u-m-t-140 u-m-b-120">
			<u-image src="" width="160rpx" height="160rpx" shape="circle"></u-image>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20">
			<u-image :fade="false" src="/static/images/icon_phone.png" width="40rpx" height="40rpx"></u-image>
			<u-input class="u-m-l-20 u-m-r-20" v-model="data.account" placeholder="输入手机号" border="none"></u-input>
		</view>
		<view class="u-flex u-flex-y-center login-input u-m-b-48 u-p-l-20 u-p-r-20">
			<u-image :fade="false" src="/static/images/icon_password.png" width="40rpx" height="40rpx"></u-image>
			<u-input class="u-m-l-20 u-m-r-20" type="password" v-model="data.password" placeholder="输入密码"
				border="none"></u-input>
			<u-image :fade="false" src="/static/images/icon_eye.png" width="40rpx" height="40rpx"></u-image>
		</view>
		<u-button customStyle="margin:130rpx auto 20rpx;height:100rpx;fontSize:36rpx;borderRadius:12rpx" type="primary"
			@click="_login">立即登录</u-button>
		<u-text align="right" text="忘记密码" @click="handlePassword" color="#333" size="24rpx"></u-text>
		<view class="u-flex-y-center agree-text">
			<u-image :src="checkImg" @click="data.checkShow = !data.checkShow" width="32rpx" height="32rpx"></u-image>
			<view class="u-m-l-12"><u-text text="登录即代表同意" color="#333333" size="24rpx"></u-text></view>
			<view><u-text text="《用户协议》和" @click="$u.route('/pages/mine/agreement?title=用户协议')" color="#0C9BF4" size="24rpx"></u-text></view>
			<view> <u-text text="《隐私政策》" @click="$u.route('/pages/mine/agreement?title=隐私政策')" color="#0C9BF4" size="24rpx"></u-text></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue';
	import { login } from '../../config/api';
	import { setCache } from '../../util/util';
	interface TypeData {
		[prop : string] : string | number | Function | Boolean;
	}
	const data = ref<TypeData>({
		checkShow: false,
		account: '',
		password: '',
	})
	// 登录
	const _login = () => {
		if(!data.value.checkShow){
			uni.$u.toast('请先阅读并同意用户协议')
			return 
		}
		let params = {
			account: data.value.account,
			password: data.value.password
		}
		login(params).then(res => {
			setCache('userInfo', res.data.userinfo)
			setCache('token', res.data.userinfo.token)
			uni.$u.toast('登录成功')
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 500)
		})
	}
	const checkImg = computed(() => {
		return data.value.checkShow ? '/static/images/icon_check_y.png' : '/static/images/icon_check_n.png'
	})
	const handlePassword = () => {
		uni.$u.route('/pages/login/loginPassword')
	}
</script>

<style scoped lang="scss">
	.home {
		padding: 0 60rpx;
	}

	.login-input {
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 12px;
	}

	.agree-text {
		position: fixed;
		bottom: 10%;
	}
</style>